<!--
 * @Author: yao
 * @Date: 2024-11-19 16:48:33
 * @LastEditTime: 2024-11-21 15:38:18
 * @LastEditors: yao
 * @Description: 
 * @FilePath: \element-plus-vite-starter-main\src\Layouts\SubMenu.vue
-->
<template>
  <div v-for="menu in menuData" :key="menu.meta.id">
    <el-sub-menu v-if="menu.children && menu.children.length > 0" :index="menu.meta.id">
      <template #title>
        <span>{{ menu.meta.title }}</span>
      </template>
      <SubMenu :menu-data="menu.children"></SubMenu>
    </el-sub-menu>
    <el-menu-item v-else :index="menu.meta.id">{{ menu.meta.title }}</el-menu-item>
  </div>
</template>
<script setup lang='ts'>
import { ref, reactive, computed } from 'vue'

const props = defineProps({
  menuData: {
    type: Array,
    required: true,
    default: () => []
  },
  isChild: {
    type: Boolean,
    default: false
  },
  pId: {
    type: Number,
    required: false,
    default: 0
  }
})

const currentSubMenu = ref({})
const reformData = (data: any) => {
  let res = []
  for (let item of data) {
    let obj: any = {
      label: item.meta.title,
      path: item.path,
      name: item.name
    }
    if (item.children && item.children.length > 0) {
      obj.items = reformData(item.children)
    }
    res.push(obj)
  }
  return res
}

const getMenus = computed(() => {

  return reformData(props.menuData)
})
const clickSubMenu = (menu) => {
  currentSubMenu.value = menu
}
</script>
<style scoped lang='scss'></style>